<template>
	<view class="content">
		<home v-if="is_home"></home>
		<template v-else>

			<view class="header">
				<span class="header__title">接口配置</span>
				<view class="header__button-group">
					<button class="uni-btn uni-btn-mini" plain size="mini" type="error">删除API</button>
					<button class="uni-btn uni-btn-mini" plain size="mini" type="primary" @click="save">保存API</button>
					<button class="uni-btn uni-btn-mini" plain size="mini" type="warning" @click="getMock">运行测试</button>
				</view>
			</view>
			<view class="card-box shrink top">
				<view class="card-item">
					<view class="card-item__title">接口地址</view>
					<view class="card-item__content">
						/{{formData.key}}{{formData.api}}
					</view>
				</view>
				<!-- <view class="card-item top">
					<view class="card-item__title">项目Key</view>
					<view class="card-item__content">
						{{formData.key}}
					</view>
				</view> -->
			</view>
			<view class="card-box no-padding shrink">
				<div class="card-header">
					<span class="card-header__title">请求参数</span>
					<span class="card-header__title to-link">参数说明</span>
				</div>
				<div id="editormd-args"></div>
			</view>

			<view class="card-box no-padding heightFull">
				<div class="card-header">
					<span class="card-header__title">返回值处理函数</span>
					<span class="card-header__title to-link">返回值说明</span>
				</div>
				<div class="full">
					<div id="editormd-content"></div>
				</div>
			</view>
		</template>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog :type="dialog.type" :title="dialog.title" :content="dialog.content"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		config
	} from '@/common/mockConfig.js'

	export default {
		data() {
			return {
				title: 'Hello',
				formData:{
					api:'',
					key:''
				},
				dialog: {
					type: "error",
					content: '',
					title: '提示'
				},
				userinfo: {},
				is_home: false
			}
		},
		onLoad(e) {
			let params = null
			try {
				params = JSON.parse(e.params)
				let userinfo = this.$t.dbGet('userinfo')
				this.formData= {
					api:params.menu_id,
					key:userinfo._id+params.project_path,
					...params
				}
			}catch(e){
				params = null
			}
		},
		mounted() {
			if (!this.is_home) {
				this.editorInit()
				this.getApiDetail()
			}
		},
		methods: {
			editorInit() {
				this.testEditorData = editormd("editormd-content", {
					...config,
					height: '100%',
					markdown: 'function(args,Mock){\n\treturn {\n\t\tret:0,\n\t\tdata:[{}]\n\t}\n}',
					onload() {
						this.setCursor({
							line: 3,
							ch: 9
						});
					}
				});
				this.editormdArgs = editormd('editormd-args', {
					...config,
					height: 260,
					markdown: '{\n}',
					onload() {
						this.setCursor({
							line: 0,
							ch: 2
						});
					}
				})
			},
			save(){
				let is_type = true
				let agrs = this.editormdArgs.getValue()
				let value = this.testEditorData.getValue()
				try{
					const temp = JSON.parse(agrs)
					is_type = true
				}catch(e){
					//TODO handle the exception
					console.log(e.message);
					this.openDialog('请求参数错误：'+e.message)
					is_type = false
				}
				if(!is_type) return
				try{
					let fn = new Function('return ' + value)
					fn()()
					is_type = true
				}catch(e){
					//TODO handle the exception
					console.log(e);
					this.openDialog('处理函数错误：'+e.message)
					is_type = true
				}
				if(is_type){
					this.$api.save_api({
						...this.formData,
						detail:{
							agrs,
							value
						}
					}).then(res=>{
						console.log('success',res);
					}).catch(err=>{
						console.log(err);
					})
				}
				
			},
			getApiDetail(){
				this.$api.get_api_detail(this.formData).then(res=>{
					let detail = res.data.detail
					this.editormdArgs.setValue(detail.agrs)
					this.testEditorData.setValue(detail.value)
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getMock() {
				let value = this.testEditorData.getValue()
				let agrs = this.editormdArgs.getValue()
				agrs = eval('(' + agrs + ')')
				try {
					let fn = new Function('return ' + value)
					let callbackData = fn()(agrs, Mock)
					var data = Mock.mock(callbackData)
					uni.$emit('buildValue', data)

				} catch (err) {
					console.log(err.message);
				}

			},
			openDialog(content = '', type = 'error') {
				this.dialog.title = '提示'
				this.dialog.content = content
				this.dialog.type = type
				this.$refs.dialog.open()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		height: calc(100vh - 55px);
		// padding: 0 10px;
		padding-bottom: 10px;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #f9f9f9;
		overflow-y: scroll;

		.header {
			flex-shrink: 0;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 15px;
			border-bottom: 1px #eee solid;
			background-color: #FFFFFF;

			&__title {
				font-size: 16px;
				color: #2C405A;
			}

			&__button-group {
				margin-right: 5px;
			}
		}

		.card-box {
			padding: 15px;
			margin: 7px 15px;
			border: 1px #eee solid;
			border-radius: 10px;
			background-color: #fff;
			overflow: hidden;
			flex-shrink: 0;

			&.top {
				margin-top: 15px;
			}

			&.no-padding {
				padding: 0;
			}

			&.shrink {
				flex-shrink: 0;
			}

			&.heightFull {
				flex: 1;
				min-height: 500px;

				.full {
					height: calc(100% - 46px);
					overflow: hidden;
				}
			}

			.card-header {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30px;
				padding-right: 15px;
				height: 45px;
				color: #2C405A;
				border-bottom: 1px $uni-color-primary solid;

				&__title {
					font-size: 14px;
				}

				&::after {
					content: '';
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: #2C405A;
					top: 0;
					left: 10px;
					bottom: 0;
					margin: auto;
					border-radius: 50%;
					z-index: 2;
				}

				&::before {
					content: '';
					position: absolute;
					width: 6px;
					background-color: $uni-color-primary;
					top: 0;
					left: 0px;
					bottom: 0;
					margin: auto;
					z-index: 2;
				}
			}

			.card-item {
				display: flex;
				border-radius: 5px;
				background-color: #F5F5F5;
				overflow: hidden;

				&.top {
					margin-top: 10px;
				}

				&__title {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					width: 100px;
					height: 40px;
					line-height: 1;
					color: #2C405A;
					font-size: 14px;
					// background-color: $uni-color-primary;
					background-color: #eee;
				}

				&__content {
					display: flex;
					align-items: center;
					padding-left: 15px;
					color: #2C405A;
				}
			}
		}
	}

	.to-link {
		text-decoration: underline;
		color: $uni-color-primary;
		cursor: pointer;

		&:hover {
			color: $uni-color-warning;
		}
	}

	.editormd {
		margin: 0;
		border: none;
	}
</style>
